<!-- 历史健康评分曲线图 -->

<template>
    <div class="history-health-score">
        <div ref="historyChart" class="history-chart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'HistoryHealthScore',
    data() {
        return {
            chart: null
        }
    },
    props: {
        historyData: {
            type: Array,
            default: () => null
        }
    },
    watch: {
        // 监听数据变化，更新图表
        historyData: {
            handler(newVal) {
                if (newVal && Array.isArray(newVal) && newVal.length > 0) {
                    this.$nextTick(() => {
                        this.initChart()
                    })
                }
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {
        this.$nextTick(() => {
            if (this.historyData && Array.isArray(this.historyData) && this.historyData.length > 0) {
                this.initChart()
            }
            // 监听窗口大小变化，自适应调整图表
            window.addEventListener('resize', this.handleResize)
        })
    },
    beforeDestroy() {
        // 组件销毁前清理图表实例和事件监听
        window.removeEventListener('resize', this.handleResize)
        if (this.chart) {
            this.chart.dispose()
            this.chart = null
        }
    },
    methods: {
        // 根据数据源生成图表数据
        generateChartData(dataList) {
            if (!dataList || !Array.isArray(dataList) || dataList.length === 0) {
                return {
                    xAxisData: [],
                    yAxisData: []
                }
            }

            // 提取 label 作为 x 轴数据
            const xAxisData = dataList.map(item => item.label || '')
            
            // 提取 scoreTotal 作为 y 轴数据
            const yAxisData = dataList.map(item => item.scoreTotal || 0)

            return {
                xAxisData,
                yAxisData
            }
        },
        initChart() {
            // 如果没有数据，不初始化图表
            if (!this.historyData || !Array.isArray(this.historyData) || this.historyData.length === 0) {
                return
            }

            // 初始化图表实例
            if (!this.chart) {
                this.chart = echarts.init(this.$refs.historyChart)
            }

            // 根据数据源生成图表数据
            const chartData = this.generateChartData(this.historyData)
            const xAxisData = chartData.xAxisData
            const yAxisData = chartData.yAxisData

            const option = {
                grid: {
                    left: '3%',
                    right: '4%',
                    top: '15%',
                    bottom: '25%',
               
                    
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    borderColor: '#409EFF',
                    borderWidth: 1,
                    padding: [10, 15],
                    textStyle: {
                        color: '#333',
                        fontSize: 13
                    },
                    formatter: function(params) {
                        const param = params[0]
                        const value = param.value || 0
                        
                        // 根据分数设置颜色
                        let valueColor = '#67C23A' // 绿色 - 高分
                        if (value < 60) {
                            valueColor = '#F56C6C' // 红色 - 低分
                        } else if (value < 80) {
                            valueColor = '#E6A23C' // 橙色 - 中分
                        }
                        
                        return `
                            <div style="font-weight: 600; color: #2d4a6b; margin-bottom: 6px;">${param.name}</div>
                            <div style="display: flex; align-items: center;">
                                <span style="display: inline-block; width: 10px; height: 10px; background-color: #409EFF; border-radius: 50%; margin-right: 8px;"></span>
                                <span style="color: #666; margin-right: 8px;">${param.seriesName}:</span>
                                <span style="color: ${valueColor}; font-weight: 600; font-size: 14px;">${value}分</span>
                            </div>
                        `
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    
                },
                yAxis: {
                    type: 'value',
                    name: '评分',
                    min: 0,
                    max: 100,
                    axisLine: { show: false },
                    axisLabel: { color: '#666' },
                    splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } }
                },
                series: [
                    {
                        name: '健康评分',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        lineStyle: {
                            width: 3,
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#409EFF' },
                                { offset: 1, color: '#66b1ff' }
                            ])
                        },
                        itemStyle: {
                            color: '#409EFF',
                          
                        },
                        areaStyle: {
                            opacity: 0.25,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#409EFF' },
                                { offset: 1, color: 'rgba(64, 158, 255, 0)' }
                            ])
                        },
                        data: yAxisData
                    }
                ]
            }

            this.chart.setOption(option)
        },

        handleResize() {
            // 窗口大小改变时重新调整图表大小
            if (this.chart) {
                this.chart.resize()
            }
        }
    }
}
</script>

<style scoped>
.history-health-score {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-chart {
    width: 100%;
    height: 100%;
    min-height: 0;
}
</style>
